<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">

   <style type="text/css">
   body {
      font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
      padding: 0px;
      margin: 0px;
      text-align: center;
   }
   
   .container {
      margin-top: 200px;
   }

   .app-icon {
      height: 100px;
      border-radius: 20px;
   }

   h1 {
      font-size: calc(1.375rem + 1.5vw);
      font-weight: 500;
   }
   .error-text {
      color: #6c757d;
   }
   </style>

   <title>Error</title>
</head>
<body>
   <div class="container">
      <div>
         <!-- Umbrel logo -->
         <svg width="93" height="105" viewBox="0 0 93 105" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M47.1162 105C48.85 105 50.9245 104.679 53.3395 104.037C61.4926 100.971 65.5692 95.0672 65.5692 86.3255V61.3121C65.5692 60.8357 65.5383 60.4214 65.4764 60.0692C65.4764 60.0071 65.4712 59.9657 65.4609 59.9449C65.4506 59.9242 65.4248 59.8828 65.3835 59.8207C64.5372 57.687 63.1955 56.6202 61.3585 56.6202H61.1108L60.5844 56.6513H60.3058C60.2439 56.6513 60.1716 56.6823 60.0891 56.7445C57.963 57.5731 56.9 59.3235 56.9 61.9957V87.6305C56.9 89.0184 56.5491 90.3752 55.8473 91.701C53.8658 94.8289 50.9245 96.3929 47.0233 96.3929C44.0717 96.3929 41.5741 95.4711 39.5306 93.6275C37.8587 92.2603 37.0021 89.7434 36.9608 86.0769L36.8989 60.8771C36.8989 60.6493 36.8783 60.411 36.837 60.1624C36.837 60.0796 36.8318 60.0226 36.8215 59.9916C36.8112 59.9605 36.7751 59.9035 36.7131 59.8207C35.8462 57.6456 34.4736 56.558 32.5953 56.558C31.9967 56.6202 31.5942 56.6927 31.3878 56.7756C29.3237 57.6042 28.2916 59.0024 28.2916 60.9703L28.3845 87.1023C28.4052 90.9967 29.4785 94.5079 31.6045 97.6358C35.5676 102.545 40.6969 105 46.9924 105H47.1162Z" fill="#5351FB"/>
            <path fill-rule="evenodd" clip-rule="evenodd" d="M17.4517 40.4302C12.7214 40.4302 9.82339 41.8182 7.98048 44.0001C6.47085 45.7874 3.80334 46.0081 2.02243 44.493C0.241521 42.978 0.0216106 40.3009 1.53125 38.5136C5.39717 33.9367 10.963 31.9453 17.4517 31.9453C22.9046 31.9453 27.9024 33.335 32.3379 36.1353C36.9332 33.4016 41.7749 31.9453 46.8188 31.9453C51.7503 31.9453 56.4062 33.3384 60.7341 35.9888C64.5971 33.3787 69.2338 32.1792 74.4003 32.1792C80.8802 32.1792 86.5877 34.0623 91.2259 38.0272C93.0032 39.5465 93.2168 42.2241 91.7029 44.0078C90.189 45.7914 87.521 46.0058 85.7437 44.4865C82.8402 42.0045 79.158 40.6641 74.4003 40.6641C69.9059 40.6641 66.6755 41.8574 64.3151 43.9022C62.4688 45.5017 59.7715 45.6251 57.7877 44.2009L57.7131 44.1474C54.1394 41.6012 50.5342 40.4302 46.8188 40.4302C43.0364 40.4302 39.1958 41.6452 35.232 44.3366C33.371 45.6002 30.9173 45.5447 29.1149 44.1982L28.984 44.1004C25.6669 41.6634 21.8736 40.4302 17.4517 40.4302Z" fill="#5351FB"/>
            <path fill-rule="evenodd" clip-rule="evenodd" d="M70.262 16.392C64.097 11.0258 56.1491 8.29985 46.0535 8.49453C35.9105 8.69011 28.0333 11.6155 22.0552 16.9826C16.0265 22.3952 11.53 30.6505 8.87493 42.2101C8.35052 44.4932 6.08115 45.9174 3.80615 45.3912C1.53115 44.8649 0.112013 42.5874 0.636423 40.3042C3.55057 27.6167 8.70808 17.5811 16.4183 10.6589C24.179 3.69135 34.1255 0.238118 45.8911 0.0112437C57.7039 -0.216542 67.7956 3.01361 75.8015 9.9822C83.7379 16.8903 89.2264 27.1251 92.5785 40.2C93.1603 42.4691 91.799 44.7819 89.538 45.3657C87.277 45.9496 84.9724 44.5834 84.3907 42.3143C81.3097 30.2972 76.4964 21.8187 70.262 16.392Z" fill="#5351FB"/>
         </svg>
         <!-- Right caret -->
         <svg width="100" height="100" viewBox="0 0 32 32" viewBox="0 0 32 32"><path d="M18.629 15.997l-7.083-7.081L13.462 7l8.997 8.997L13.457 25l-1.916-1.916z" fill="#555555" /></svg>
         <!-- App icon -->
         <img alt="<%= app.name %>" src="https://getumbrel.github.io/umbrel-apps-gallery/<%= app.id %>/icon.svg" class="app-icon">
      </div>
      
      <h1 class="text-center mt-5 mb-2">Oops, there was an error</h1>
      <p class="text-muted w-75 text-center error-text">There was an error connecting to <%= app.name %>. Error code: <%= err.code %></p>
   </div>
</body>
</html>